<template>
  <div><back></back></div>
  <div>
    <van-tabs v-model:active="active">
      <van-tab title="母婴"><content></content></van-tab>
      <van-tab title="新品"><news></news></van-tab>
      <van-tab title="热销"><hot></hot></van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 选项卡  对应的内容
import content from "@/views/classify/tabs/Mother_content.vue";
import news from "@/views/classify/tabs/Mother_new.vue";
import hot from "@/views/classify/tabs/Mother_hot.vue";

// 返回按钮
import back from "@/components/Back.vue";

const active = ref(0);
</script>

<style lang="less" scoped>
:deep(.van-tabs__line) {
  width: 0;
}
:deep(.van-tabs--line .van-tabs__wrap) {
  height: 6vw;
  margin-bottom: 4.8vw;
}
:deep(.van-tab) {
  flex: none;
  padding: 0;
  margin: 0 5vw;
  font-weight: 600;
  color: #999;
}
:deep(.van-tab--active) {
  font-size: 6vw;
  color: #333;
}
</style>
